<template>
  <div class="running-job-list flex-h flex-center">
    <div class="running-job-box" v-if="list.length > 0">
      <div class="job-item" v-for="item in list">
        <div v-if="item.img" class="job-item-inner">
          <el-image :src="item['img']" fit="cover" loading="lazy">
            <template #placeholder>
              <div class="image-slot">正在加载图片</div>
            </template>

            <template #error>
              <div class="image-slot">
                <el-icon>
                  <Picture />
                </el-icon>
              </div>
            </template>
          </el-image>
        </div>
        <template v-else>
          <div class="h100 flex-h flex-center">
            <i class="iconfont icon-jiazai mr-5"></i>
            <span>生成中，请稍后</span>
          </div>
        </template>
      </div>
    </div>
    <el-empty :image-size="300" description="快去生成你的创意吧～" v-else />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { CircleCloseFilled, Picture } from "@element-plus/icons-vue";
import { isImage, removeArrayItem, substr } from "@/utils/libs";
import { FormatFileSize, GetFileIcon, GetFileType } from "@/store/system";

const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
});
</script>

<style scoped lang="stylus">
@import "../assets/css/running-job-list.styl"
</style>
